<template>
    <div class="box">
        <h2>个人简介</h2>
        <div>姓名:{{name}}</div>
        <div>年龄:{{age}}</div>
        <div>
            <h4>朋友</h4>
            <ul>
                <li v-for="(item,index) in friends" :key="index">{{item}}</li>
            </ul>
        </div>
        <div>
            <h4>妻子</h4>
            <div>名字:{{wife.wname}}</div>
        </div>
    </div>    
</template>

<script>
export default {
    props:{
       name:{
         type:String,
         required:true
       }, 
       age:{
         type:[Number,String],
         validator: value => value >= 0 && value <= 120,
         default:18 
       },
       friends:{
        type:Array,
        default:()=>['朋友1','朋友2','朋友3']
       },
       wife:{
         type:Object,
         default:()=>({wname:'Monica'})
       }
    }
}
</script>

<style>
    .box{
        text-align: center;
        width: 300px;
        height: 350px;
        border: 1px dashed #ccc;
        border-radius: 15px;
    }
    li{
        list-style: none;
    }
</style>